<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Website</title>

	<link rel="stylesheet" type="text/css" href="./static/css/zzsc-demo.css">
	<style>
		.page {
			display: flex;
			flex-flow: column;
			padding: 50px;
			padding-top: 0;
			align-items: center;
			color: black;
			background-color: #f2f2f2;
		}
	</style>
</head>

<body>
	<!-- 页面主体容器 -->
	<section class="page page1">
		<h1>作品所属出版社分析</h1>
		<div id="page1" style="width:100%;height:1000px;background-color: white"></div>
	</section>

	<section class="page page2">
		<h1>作者著作量分析</h1>
		<div id="page2" style="width:100%;height:1000px;background-color: white"></div>
	</section>

	<section class="page page3">
		<h1>图书价格分析</h1>
		<div id="page3" style="width:100%;height:1000px;background-color: white"></div>
	</section>

	<section class="page page4">
		<h1>价格与热度相关性分析</h1>
		<div id="page4" style="width:100%;height:1000px;background-color: white"></div>
	</section>

	<button id="downBtn" class="button button--view" aria-label="Show me more">
		<svg width="100%" height="100%" viewBox="0 0 310 177" preserveAspectRatio="xMidYMid meet">
			<path fill="#FFFFFF"
				d="M159.875,174.481L306.945,27.41c2.93-2.929,2.93-7.678,0-10.606L292.803,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.896,0.79-5.303,2.197L154.572,130.287L26.946,2.661c-1.406-1.407-3.314-2.197-5.303-2.197c-1.989,0-3.897,0.79-5.303,2.197L2.197,16.804C0.733,18.269,0,20.188,0,22.107s0.732,3.839,2.197,5.303l147.071,147.071C152.197,177.411,156.945,177.411,159.875,174.481L159.875,174.481z" />
		</svg>
	</button>
</body>

<!-- 翻页依赖 -->
<script src="./static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="./static/js/naiveScroll.min.js"></script>

<!-- 翻页代码 -->
<script>
	$(document).ready(function () {
		$(this)._naiveScroll.init();

		$('#downBtn').click(function () {
			$(this)._naiveScroll.triggerScroll(-100);
		});
	});
</script>

<!-- 从后台读入数据 -->
<script src="./data/data.js"> </script>

<!-- chart依赖 -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>

<!-- chart设置 -->
<!-- page1 作品所属出版社分析 -->
<script type="text/javascript">
	{
		// console.log(publisherData)
		let data = []
		let otherCount = 0
		for (let key in publisherData) {
			if (publisherData[key] > 20) {
				data.push({
					name: key,
					value: publisherData[key]
				})
			} else otherCount += publisherData[key]
		}

		data.push({
			name: '其他',
			value: otherCount
		})

		let myChart = echarts.init(document.getElementById('page1'));
		let option = {

			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			legend: {
				type: 'scroll',
				orient: 'vertical',
				right: 10,
				top: 20,
				bottom: 20,
				data: data.legendData,

				selected: {
					"未知": false,
					"其他": false
				}
			},
			series: [{
				name: '出版社',
				type: 'pie',
				radius: '55%',
				center: ['40%', '50%'],
				data,
				itemStyle: {
					emphasis: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		};
		myChart.setOption(option);
	}
</script>

<!-- page2 -->
<script type="text/javascript">
	{
		let categoryData = []
		let valueData = []

		let temp = []
		for (let key in authorData) {
			if (key !== "作者未知") {
				if (authorData[key] > 3) {
					temp.push({
						name: (key.length > 50) ? (key.substr(0, 50) + "…") : key,
						num: authorData[key]
					})
				}
			}
		}

		Array.prototype.sort.call(temp, (a, b) => a.num - b.num)
		console.log(temp)

		for (let item of temp) {
			categoryData.push(item.name)
			valueData.push(item.num)
		}

		let myChart = echarts.init(document.getElementById('page2'));
		let option = {

			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},

			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01]
			},
			yAxis: {
				type: 'category',
				data: categoryData
			},
			series: [{
				// name: '2011年',
				type: 'bar',
				data: valueData
			}]
		};
		myChart.setOption(option);
	}
</script>

<!-- page3 -->
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
	{
		// console.log(priceData)
		let categoryData = []
		let valueData = []
		for (let key in priceData) {
			// console.log(key)
			categoryData.push(+key)
			valueData.push(priceData[key])
		}

		// console.log(categoryData)
		let myChart = echarts.init(document.getElementById('page3'));
		let option = {
			toolbox: {
				feature: {
					dataZoom: {
						yAxisIndex: false
					},
					saveAsImage: {
						pixelRatio: 2
					}
				}
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: {
				bottom: 90
			},
			dataZoom: [{
				type: 'inside'
			}, {
				type: 'slider'
			}],
			xAxis: {
				data: categoryData,
				silent: false,
				splitLine: {
					show: false
				},
				splitArea: {
					show: false
				}
			},
			yAxis: {
				splitArea: {
					show: false
				}
			},
			series: [{
				type: 'bar',
				data: valueData,
				// Set `large` for large data amount
				large: true
			}]
		};
		myChart.setOption(option);
	}
</script>

<!-- page4 价格与热度相关性分析 -->
<script type="text/javascript">
	{
		let data = price_commentData
		let myChart = echarts.init(document.getElementById('page4'));
		let option = {
			backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
				offset: 0,
				color: '#f7f8fa'
			}, {
				offset: 1,
				color: '#cdd0d5'
			}]),
			title: {
				subtext: '已去除极大值与极小值'
			},
			xAxis: {
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				}
			},
			yAxis: {
				splitLine: {
					lineStyle: {
						type: 'dashed'
					}
				},
				scale: true
			},
			series: [{
				data,
				type: 'scatter',
				symbolSize: data => Math.sqrt(data[2]) / 10,
				label: {
					emphasis: {
						show: true,
						formatter: function (param) {
							// 这里是点的名字
							return param.data[3];
						},
						position: 'top'
					}
				},
				itemStyle: {
					normal: {
						shadowBlur: 10,
						shadowColor: 'rgba(120, 36, 50, 0.5)',
						shadowOffsetY: 5,
						color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
							offset: 0,
							color: 'rgb(251, 118, 123)'
						}, {
							offset: 1,
							color: 'rgb(204, 46, 72)'
						}])
					}
				}
			}]
		};
		myChart.setOption(option);
	}
</script>



</html>